今天想來討論關於 Chakra UI breakpoint 使用方式，雖然跟設計系統不一定很有關係，但又很有關係。

Responsive Styles

Responsive Styles 是 Chakra UI 對於網頁響應式的解決方案
(這是我第一次接觸 Chakra UI 就愛上的一大原因 )
不需要總是手動添加 @media queries 或是滿滿的巢狀 style。 取而代之的是用物件或陣列的方式去添加數值。

原本的主題是預設五種 breakpoint ，而它們是可以透過客製主題去增加減少以及調整 breakpoint 的界線。

base: '0em', //基本
sm: '30em',  // 480px
md: '48em',  // 768px
lg: '62em',  // 992px
xl: '80em',  // 1280px
'2xl': '96em',  // 1536px

並且 Chakra UI 採取的是手機優先的策略，因此是運用 min-width media query
當你設定 sm 後，從螢幕寬度 30em 後都會採用此數值，除非你有設定接下來的值(md or lg ....)

Object syntax

正常的透過 props style 撰寫 fontSize

<Text fontSize="12px">鐵人賽加油 </Text>

以物件語法傳入屬性

<Text fontSize={{ base: '12px', md: '14px', lg: '16px' }}>
  鐵人賽加油
</Text>

這樣的效果會是 0~768px 為 12px、768 ~ 992px 為 14px、992~ 為 16px

Array syntax

而陣列的語法如下

<Box  fontSize={[300, 400, 500]}>
  卡片
</Box >

它會是按照順序去轉換，以上面的語法來說會等同時 base: 300 , sm: '400',lg:'500'

如果這之間有過度的 breakpoint 沒有變化
建議不要寫成 [300, 300, 300, 400] 而是用 null 去替代 [300, null, null, 400]
因為這樣才不會產生多餘不需要的 css

可以來看看在 Chakra UI 是做了什麼轉換

以這個為例

<Text fontSize={{ base: '12px', md: '14px', lg: '16px' }}>
  鐵人賽加油
</Text>

最後會產生這樣的 CSS

.Text {
  fontSize: 12px;
}

@media screen and (min-width: 48em) {
  .Text {
     fontSize: 14px;
  }
}

@media screen and (min-width: 62em) {
  .Text {
     fontSize: 16px;
  }
}

最後簡單看下如何在主題上客製化 Breakpoints

相單容易，按照前幾天介紹客製的概念，規劃 breakpoints 的物件即可

//  Update the breakpoints as key-value pairs
const breakpoints = {
  sm: '320px',
  md: '768px',
  lg: '960px',
  xl: '1200px',
  '2xl': '1536px',
}

//  Extend the theme
const theme = extendTheme({ breakpoints })